<template>
    <div class="box">

        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <div>
                    <van-field v-model="demandType" is-link readonly label="事件类别" placeholder="请选择"
                        @click="showPickerDemandType = true" :rules="[{ required: true, message: '请选择事件类别' }]" />
                    <van-popup v-model:show="showPickerDemandType" round position="bottom">
                        <van-picker :columns="levelColumnsDemandType"
                            :columns-field-names="{ text: 'ryD_DemandTypeName', value: 'ryD_DemandTypeNo' }"
                            @cancel="showPickerDemandType = false" @confirm="onConfirmType" />
                    </van-popup>
                </div>
                <div>
                    <van-field v-model="demandLevel" is-link readonly label="重要级别" placeholder="请选择"
                        @click="showPicker = true" :rules="[{ required: true, message: '请选择事件重要级别' }]" />
                    <van-popup v-model:show="showPicker" round position="bottom">
                        <van-picker :columns="levelColumns"
                            :columns-field-names="{ text: 'ryD_DemandLevelName', value: 'ryD_DemandLevelNo' }"
                            @cancel="showPicker = false" @confirm="onConfirm" />
                    </van-popup>
                </div>
                <div>
                    <van-field v-model="demandIt" is-link readonly label="IT处理人员" placeholder="请选择IT处理人员"
                        @click="showPickerIt = true" :rules="[{ required: true, message: '请选择IT处理人员' }]" />
                    <van-popup v-model:show="showPickerIt" round position="bottom">
                        <van-picker :columns="itColumns" :columns-field-names="{ text: 'ryD_Name', value: 'ryD_Id' }"
                            @cancel="showPickerIt = false" @confirm="onConfirmIt" />
                    </van-popup>
                </div>

            </van-cell-group>
            <van-cell-group inset>
                <van-field v-model="from.RYD_UserName" name="RYD_UserName" label="姓名" placeholder="用户姓名，非必填" />
                <van-field v-model="from.RYD_UserAddress" name="RYD_Address" label="位置" placeholder="用户所在位置，非必填" />
                <van-field v-model="from.RYD_UserIp" name="RYD_UserIp" label="IP地址" placeholder="用户IP地址，非必填" />

                <van-field v-model="from.RYD_UserPhone" name="RYD_UserPhone" label="联系方式" placeholder="用户联系方式，非必填" />

            </van-cell-group>
            <van-cell-group inset>
                <van-field v-model="from.RYD_DemandDetails" name="RYD_DemandDetails" rows="4" autosize label="需求详情"
                    type="textarea" placeholder="请输入需求详情" :rules="[{ required: true, message: '请填写需求详情' }]" />

                    <van-field v-model="from.RYD_Reason" name="RYD_Reason" rows="4" autosize label="具体原因"
                    type="textarea" placeholder="请输入具体原因" :rules="[{ required: true, message: '请填写具体原因' }]" />

                <van-field v-model="from.RYD_Solution" name="RYD_Solution" rows="4" autosize label="解决方案"
                    type="textarea" placeholder="请输入解决方案" :rules="[{ required: true, message: '请填写解决方案' }]" />

                <van-field name="switch" label="加入知识库">
                    <template #input>
                        <van-switch v-model="from.RYD_KBId" />
                    </template>
                </van-field>
            </van-cell-group>
            <van-cell-group inset>
                <van-field name="RYD_FilesT" label="文件上传">
                    <template #input>
                        <van-uploader v-model="from.RYD_FilesT" :max-count="3" multiple preview-size="15.5vw" />
                    </template>
                </van-field>
            </van-cell-group>

            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>



        <van-overlay :show="loading" style="margin: 0;">
            <div class="wrapper">
                <van-loading type="spinner" size="5vh" vertical color="#fff">加载中...</van-loading>
            </div>
        </van-overlay>
    </div>
</template>

<script>
export default {

}
</script>

<script setup>

import { inject, ref } from 'vue';
import axios from '@/utils/axios'
import { Notify, Dialog } from 'vant'
// eslint-disable-next-line no-unused-vars
import router from '@/router';



let nav = inject('nav');
nav.showLeft = true;
nav.textLeft = '返回';
nav.title = 'ITSM 记录需求';
nav.showRight = false;

const itColumns = ref();

const levelColumns = ref();
const levelColumnsDemandType = ref();
const showPicker = ref(false);
const showPickerIt = ref(false);
let loading = ref(true);
let demandLevel = ref();
let demandType = ref();
let demandIt = ref();
let RYD_UserId = inject('RYD_UserId');
let showPickerDemandType = ref(false)

let from = ref({
    RYD_UserId: RYD_UserId,
    RYD_Company: '',
    RYD_Level: '',
    RYD_TypeId: '',
    RYD_DemandDetails: '',
    RYD_FilesT: [],
    RYD_UserName: '',
    RYD_UserPhone: '',
    RYD_UserAddress: '',
    RYD_UserIp: '',
    RYD_ItId: '',
    RYD_KBId: false,
    RYD_Reason: '',
    RYD_Solution: '',
});
initData();
function initData() {

    Promise.all(
        [
            axios({
                method: 'get',
                url: '/api/DemandLevels',
            }).then(res => {
                levelColumns.value = res;
            }),

            axios({
                method: 'get',
                url: '/api/GetCompany?RYD_UserId=' + RYD_UserId
            }).then(res => {
                from.value.RYD_Company = res;
                axios({
                    method: 'get',
                    url: '/api/DemandType?RYD_Company=' + res,
                }).then(res => {
                    levelColumnsDemandType.value = res;
                })
                axios({
                    method: 'get',
                    url: '/api/GetAllIt?RYD_Company=' + from.value.RYD_Company
                }).then(res => {
                    itColumns.value = res;
                })
            })
        ]
    ).then(res => {
        loading.value = false;
    })
}
const onConfirmIt = (res) => {
    demandIt.value = res.ryD_Name;
    from.value.RYD_ItId = res.ryD_Id;
    showPickerIt.value = false;
};
const onConfirm = (res) => {
    demandLevel.value = res.ryD_DemandLevelName;
    from.value.RYD_Level = res.ryD_DemandLevelNo;
    showPicker.value = false;
};
const onConfirmType = (res) => {
    demandType.value = res.ryD_DemandTypeName;
    from.value.RYD_TypeId = res.ryD_DemandTypeNo;
    showPickerDemandType.value = false;

    itColumns.value = [];
    from.value.RYD_ItId = undefined;
    demandIt.value = undefined;
    axios({
        method: 'get',
        url: '/api/GetAllIt?RYD_Company=' + from.value.RYD_Company + "&RYD_TypeId=" + res.ryD_DemandTypeNo
    }).then(res => {
        itColumns.value = res;
    })
};

function onSubmit(values) {
    loading.value = true;
    axios({
        method: 'post',
        url: '/api/RecordDemand',
        data: {
            ...from.value,
            RYD_KBId: from.value.RYD_KBId + ""
        }
    }).then(res => {
        loading.value = false;

        if (res == true || res == "true") {
            Dialog.alert({
                message: '需求记录成功。',
            }).then(() => {
                // on close
                // router.back();
                router.go(0)
            });
        } else {
            Notify({ type: 'danger', message: '失败' });
        }

    }).catch(() => {
        loading.value = false;
        Notify({ type: 'danger', message: '失败' });
    })
}

</script>

<style scoped>
.box .van-cell-group {
    margin-top: 2vh;
}
</style>